import { CloseOutlined } from "@ant-design/icons"
import { Button, Card, Input, Form, Switch, InputNumber, message } from "antd"
import React, { useCallback, useEffect, useState } from "react"

import { ModalRef } from "../modal.context"
import eventBus from "@/utils/event.bus"

import serviceManage from "@/services/service.manage"
import limitNumber from "@/utils/checkNum.func"

interface Props {
	id: string
}
const AddsiteMapModel: React.FC<Props & ModalRef> = props => {
	const { modalRef, id } = props
	const { TextArea } = Input
	const [form] = Form.useForm()
	const [lock, setLock] = useState(false)
	const [params, getParams] = useState({})
	const exhibitionId = location.search.split("exhibitionId=")[1]
	const [done, setDone] = useState(false)
	const [switchStatus, setSwitchStatus] = useState(false)
	const closeModal = useCallback(() => {
		modalRef.current.destroy()
	}, [])
	const onChange = (checked: boolean) => {
		setSwitchStatus(checked)
	}
	useEffect(() => {
		if (!!lock) {
			serviceManage[!!id ? "updataSiteMap" : "addSiteMap"](params).then((res: { code: number }) => {
				if (res.code === 200) {
					eventBus.emit("doSiteMapList")
					eventBus.emit("doStateNumber")

					modalRef.current.destroy()
					message.success(id ? "修改成功" : "新增成功")
				}
			})
		}
	}, [lock])
	const onFinish = useCallback(data => {
		getParams(
			!!id
				? {
						...data,
						exhibitionId,
						state: data.status === true ? 1 : 0,
						id
				  }
				: {
						...data,
						state: data.status === true ? 1 : 0,
						exhibitionId
				  }
		)
		setLock(true)
	}, [])
	useEffect(() => {
		if (id) {
			serviceManage.getSiteMapList({ id: props.id, exhibitionId }).then(res => {
				if (res.code === 200) {
					console.log({
						...res.data.entities[0]
					})
					res.data.entities[0].state === 0 ? setSwitchStatus(false) : setSwitchStatus(true)

					form.setFieldsValue({
						...res.data.entities[0],
						status: switchStatus
					})
					setDone(true)
				}
			})
		} else {
			setDone(true)
		}
	}, [])
	return (
		done && (
			<Card
				style={{ width: 530 }}
				title={props.id == "" ? "新增3D导览岛设置" : "编辑3D导览岛设置"}
				extra={
					<Button type="text" onClick={closeModal}>
						<CloseOutlined />
					</Button>
				}
			>
				<Form
					layout="horizontal"
					labelCol={{ span: 4 }}
					wrapperCol={{ span: 19 }}
					form={form}
					preserve={false}
					onFinish={onFinish}
				>
					<Form.Item label="热点显示：" name="status">
						<Switch checked={switchStatus} onChange={onChange} />
					</Form.Item>
					<Form.Item label="热点名称：" name="title">
						<TextArea showCount maxLength={15} autoSize={{ minRows: 1, maxRows: 1 }} />
					</Form.Item>
					<Form.Item label="排序：" name="sort">
						<InputNumber
							style={{ width: 200 }}
							max={9999}
							min={0}
							step={1}
							formatter={limitNumber}
							parser={limitNumber}
							placeholder="请输入正整数"
						/>
					</Form.Item>

					<Form.Item style={{ textAlign: "right" }}>
						<Button type="primary" htmlType="submit">
							保存
						</Button>
						<Button style={{ marginLeft: 10 }} htmlType="button" onClick={closeModal}>
							取消
						</Button>
					</Form.Item>
				</Form>
			</Card>
		)
	)
}

export default AddsiteMapModel
